<template>
  <div id="box">
      <div class="swiper">
          <div class="menu">
              <div v-for="i in menuData" :key="i.id" class="item">
                  <div class="title">
                      <div class="title_name">{{i.name}}</div>
                      <div class="title_dic" v-for="(a,index) in i.children" :key="a.id" v-if="index<2">{{a.name}}</div>
                      
                      <div class="content">
                        <div class="dic">分类推荐<span>根据您的购买或浏览记录推荐</span></div>
                        <div class="items">
                            <div v-for="c in i.goods" :key="c.id">
                                <img :src="c.picture" alt="">
                                <div class="item">
                                    <div>{{c.name}}</div>
                                    <div>{{str(c.desc)}}</div>
                                    <div>￥{{c.price}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                  
              </div>
          </div>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" show-indicators>
            <van-swipe-item 
            v-for="i in data" 
            :key="i.id">
            <!-- <img :src="i.imgUrl" alt=""> -->
            <img v-lazy="i.imgUrl" alt="">
          </van-swipe-item>

            <!-- <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/4</div>
            </template> -->
          </van-swipe>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            // current:0,
            data:null,
            menuData:null,
        }
    },
    async mounted(){
        const res = await this.$.getHomeSwiper();
        this.data = res.data.result;
        const res2 = await this.$.getHomeTwoMenu();
        this.menuData = res2.data.result;
    },
    methods:{
        str(a){
            if(a.length >20){
                return a.slice(0,20) + "...";
            }else{
                return a
            }
        }
    },
}
</script>

<style lang="less" scoped>
    #box{
        width: 100%;
        height: 500px;
        background:rgb(245,245,245);
        .swiper{
            height: 100%;
            width: 1240px;
            margin:0 auto;
            position: relative;
            // .custom-indicator {
            //     position: absolute;
            //     right: 5px;
            //     bottom: 5px;
            //     padding: 2px 5px;
            //     font-size: 12px;
            //     background: rgba(0, 0, 0, 0.1);
            // }
            .menu{
                position: absolute;
                width: 250px;
                height: 500px;
                position: absolute;
                left:0;
                top:0;
                background:rgba(0,0,0,.5);
                z-index: 999;
                .item{
                    // &:hover .title{background: rgb(39,186,155);}
                    // &:hover .content{display: block;}
                    width: 1240px;
                    .title{
                        white-space:nowrap;
                        &:hover{background: rgb(39,186,155);}
                        &:hover .content{display: block;}
                        width: 250px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                        justify-content: flex-start;
                        padding:0 40px;
                        // float: left;
                        .title_name{
                            font-size: 15px;
                            color:white;
                        }
                        .title_dic{
                            font-size: 12px;
                            color:white;
                            margin:0 2px;
                        }
                    }
                    .content{
                        background: rgba(255,255,255,.5);
                        display: none;
                        position: absolute;
                        top:0;
                        line-height: 18px;
                        left:250px;
                        width: 990px;
                        height: 500px;
                        .dic{
                            padding:0 20px;
                            font-size: 20px;
                            line-height: 80px;
                            span{
                                font-size:16px;
                                color:rgb(116,116,116);
                                margin-left:5px;
                            }
                        }
                        .items{
                            height: 430px;
                            width: 990px;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;
                            &>div{
                                white-space:pre-wrap;
                                &:hover{
                                    background: #E3F9F4;
                                }
                                background: white;
                                width: 310px;
                                height: 120px;
                                border-radius:4px;
                                border:1px solid #EEEEEE;
                                padding:11px;
                                color:black;
                                display: flex;
                                img{
                                    width: 95px;
                                    height: 95px;
                                }
                                .item{
                                    padding:0 10px;
                                    & :nth-child(1){font-size: 15px;line-height: 23px;}
                                    & :nth-child(2){font-size: 12px;color:#9999B0}
                                    & :nth-child(3){font-size: 15px;color:red}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>